<!doctype html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<script src="lib/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/search-index.css" />
		<title>搜索</title>
	</head>

	<body>
		<!--主题内容-->
		<section id="searchIndex">
			<!--头部-->
			<div class="search-header">
				<!--搜索-->
				<div class="search-tontrol">
					<form action="" method="">
						<input class="inp-search" type="text" name="" id="" value="" maxlength="50" placeholder="示例：税务局 软件" />
						<input class="search-submit" type="submit" value="" />
					</form>
					<!--点击关闭-->
					<span id="seaClose" class="close"></span>
					<a class="rightHref" href="#">
					</a>
				</div>
			</div>
			<section class="content">
				<ul>
					<li>
						<a href="#">
							<div>智能订阅模式</div>
							<div>更聪明的招标订阅模式</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div>订阅数据导出</div>
							<div>用表格呈现订阅数据，可下载导出</div>
						</a>
					</li>
				</ul>
			</section>
		</section>
		<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				searchCloseBtn();
				/*小X点击删除输入框的值*/
				function searchCloseBtn(){
					var $inpSearch = $(".inp-search"),
						$close = $("#seaClose");
					$inpSearch.on("focus",function(){
						_this = $(this);
						IfvalueIsNull();
					}).keyup(function(){
						IfvalueIsNull();
					}).blur(function(){
						IfvalueIsNull();
					});
					$close.on('click',function(){
						$inpSearch.val("");
						if($inpSearch.val()==""){
							$(this).hide();
						}
					});
					function IfvalueIsNull () {
						if(_this.val()!=""){
							$close.show();
						}else{
							$close.hide();
						}
					}
				};
			})
		</script>
	</body>
</html>